<template>
  <view class="address-list-container">
    <scroll-view scroll-y class="address-list">
      <view class="address-item" open-type="navigate" v-for="item in list" :key="item.id_">
        <view class="address-item-info">
          <view class="taker_name_"> {{ item.taker_name_ }} {{ item.taker_phone_ }} <text v-if="item.is_default_"
              class="default">[默认]</text>
          </view>
          <view class="taker_region_"> {{ item.taker_region_ }} {{ item.taker_address_ }} </view>
        </view>
        <navigator class="address-edit" target="" :url="`/pages/user/addressEdit?detail=${JSON.stringify(item)}`"
          hover-class="navigator-hover">
          <text>修改</text>
        </navigator>
      </view>
    </scroll-view>
    <view class="btn-comfirm-container" :style="{ paddingBottom: $safeArea.safeAreaBottom + 'px' }">
      <navigator url="/pages/user/addressEdit" hover-class="navigator-hover" open-type="navigate" class="btn-comfirm">
        <uni-icons type="plusempty" color="#fff" size="16"></uni-icons>
        新增收货地址
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import Apis from "@/services/modules/order"
import type { AdddressData } from "@/types/order"
import { onShow } from "@dcloudio/uni-app"

onShow(() => {
  getAddressData()
})

const list = ref<AdddressData[]>()
const getAddressData = async () => {
  const { data } = await Apis.getAddressListApi()
  list.value = data
}
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.address-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .address-list {
    flex: 1;
    margin-top: 16px;
    padding: 0 8px;

    .address-item {
      background-color: #fff;
      padding: 12px 8px;
      color: #333;
      line-height: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .address-item-info {
        flex: 1;

        .taker_name_ {
          font-weight: 600px;

          .default {
            color: red;
          }
        }

        .taker_region_ {
          color: #999;
          font-size: 14px;
        }
      }

      .address-edit {
        padding-left: 22px;
        color: #999;
        font-size: 14px;
        border-left: 1px solid $uni-border-color;
      }
    }
  }

  .btn-comfirm {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $uni-color-warning;
    padding: 12px 0;
  }
}
</style>
